<template>
    <div class="app-container cont">
        <div class="box codeContent" id="pdf-wrapper" v-if="form.eventAbbreviation">
            <div class="header">
                <span></span>
                <b style="font-size: 20px;color: #107ce1;">{{ form.eventAbbreviation }}</b>
                <!-- <el-button type="primary" @click="handleDown">下载</el-button> -->
                <el-button type="primary" @click="downImg">下载</el-button>
            </div>
            <div>
                <p class="indent">据中国地震台网测定，北京时间{{ getData(form.jedsDate,1) }}{{getData(form.jedsTime,2)}},在{{ form.referencePosition }}(北纬{{
                    form.jedsLatitude }}度，东经{{ form.jedsLongitude }}度)
                    发生{{ form.magnitude }}级地震，震源深度{{ form.depth }}米。此次地震最高烈度为{{ form.maximumIntensity }}。</p>
                <p><b>宏观震中：</b>{{ form.location1 }}</p>
                <p><b>人员伤亡情况：</b>本次地震已致{{ form.deadNumber }}人遇难，{{ form.injuries }}人受伤。{{ form.causeOfDeath }}</p>
                <p v-if="form.desEarthquakeDamage"><b>震害现象描述：</b>{{ form.desEarthquakeDamage }}</p>
                <p v-if="form.note"><b>说明：</b>{{ form.note }}</p>
                <el-divider />
                <p class="juzhong" v-if="form.isolinePic"><b class="subtitle">等震线</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.isolinePicList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                </p>
                <p class="juzhong" v-if="form.intensityMap"><b class="subtitle">烈度图</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.intensityMapList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                </p>
                <p class="juzhong" v-if="form.jedsZhzp"><b class="subtitle">典型震害图片</b>
                    <el-space wrap :size="10">
                        <ImagePreview v-for="item in form.jedsZhzpList" :src="baseUrl+item.attachId" class="img"></ImagePreview>
                    </el-space>
                </p>
                <el-divider v-if="form.attachment" />
                <p class="juzhong" v-if="form.attachment">
                    <b class="subtitle">附件</b>
                    <span v-for="item in form.attachmentList">
                        <span>{{ item.attachName }}</span>
                        <span style="padding:5px 10px;background-color: #107ce1;color: #fff;margin-left: 20px;border-radius: 2px;cursor: pointer;" @click="handleDownload(item)">下载</span><br>
                    </span>
                </p>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 20px auto" />
        </el-dialog>
    </div>
</template>
  
<script setup name="historicalDisasterDataDatil">
import html2canvas from "html2canvas";
import { detail } from "@/api/informationRetrieval/historicalSeismicInformation.js"
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const dialogVisible = ref(false);
const dialogImageUrl = ref();

const form = ref({});
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";
// const baseUrl = import.meta.env.VITE_APP_BASE_API + "/other/Download";

function getData(data,num){
    if(!data){
        return
    }else{
        if(num==1){
            let str = '';
            let arr = data.split('-');
            str =  arr[0]+'年'+arr[1] +'月'+arr[2]+'日';
            return str
        }else{
            let str = '';
            let arr = data.split(':');
            str =  arr[0]+'时'+ arr[1] +'分'+ arr[2]+'秒';
            return str
        }
    }
}

// 截图下载
function downImg() {
    html2canvas(document.querySelector('.codeContent')).then(canvas => {
        const imgUrl = canvas.toDataURL('image/jpeg')
        const image = document.createElement('img')
        image.src = imgUrl
        const a = document.createElement('a')
        a.href = imgUrl
        // a.download 后面的内容为自定义图片的名称
        a.download = '地震灾害信息'
        a.click()
    })
}

// 下载文件
function handleDownload(item) {
    var query = {
        attachId: item.attachId,
        name: item.attachName
    }
    location.href = baseUrl + "?name="+query.name+'&id='+ query.attachId+'&dataOrigin=5';
}
// 单条信息
function getDetail(id) {
    proxy.$modal.loading();
    detail(id).then(res => {
        proxy.$modal.closeLoading();
        form.value = res.data;
    })
}
getDetail(route.query.id)
</script>
  
<style lang="scss" scoped>
.box {
    width: 100%;
    padding: 20px;
}

.cont {
    padding-left: 20%;
    padding-right: 20%;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.indent {
    text-indent: 2em;
}

.img {
    width: 100px;
    height: 100px;
}
.juzhong{
    display: flex;
    align-items: center;
}
.subtitle {
    display: inline-block;
    width: 100px;
}
</style>
  